<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%;width: 100%">
<head>
	<title></title>
    <%@include file="/WEB-INF/common/hplus-css.jsp"%>
    <%@include file="/WEB-INF/common/hplus-js.jsp" %>
    <style type="text/css">
    #required{
	color:red;
}
    </style>
</head>

<body class="gray-bg" style="height: 100%;width: 100%">
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;width: 100%">
        <div class="row" style="height: 100%;width: 100%">
            <div class="col-sm-12" style="height: 100%;width: 100%">
                <div class="ibox" style="height: 100%;width: 100%">
                    <div class="ibox-content" style="height: 100%;width: 100%">
                        <form action="${path}/place/add" class="form-horizontal m-t" id="userForm" method="post" enctype="multipart/form-data">
                            <div class="form-group" >
                                <label class="col-sm-4 control-label"><span >*</span>名称：</label>
                                <div class="col-sm-5">
                                    <input type="text" aria-required="true" required="required"  name="name" class="form-control" placeholder="投放点名称"/>
                                </div>
                            </div>

                            <div class="form-group" >
                                <label class="col-sm-4 control-label"><span >*</span>地址：</label>
                                <div class="col-sm-5">
                                    <input type="text" aria-required="true" required="required"  name="address" class="form-control" placeholder="地址: 市-区/县-街道-门牌号"/>
                                </div>
                            </div>

                            <div class="form-group" >
                                <label class="col-sm-4 control-label"><span >*</span>类型：</label>
                                <div class="col-sm-5">
                                    <select class="form-control" name="type">
                                        <option value="2">个人投放</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" >
                                <label class="col-sm-4 control-label"><span ></span>图片：</label>
                                <div class="col-sm-4">
                                    <input type="hidden" id="photo" name="photo">
                                    <input type="text"  readonly aria-required="true" required="required"   id="img"  class="form-control" placeholder=""/>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" onclick="upload()" class="btn btn-primary waves-effect waves-light btn-md clickGis" data-id="geographicCoordinates">选择图片</button>
                                </div>
                            </div>

                            <div class="form-group" >
                                <label class="col-sm-4 control-label"><span >*</span>地理坐标：</label>
                                <div class="col-sm-2">
                                    <input type="text" aria-required="true" readonly required="required" id="log" name="longitude" class="form-control" placeholder="经度"/>
                                </div>
                                <div class="col-sm-2">
                                    <input type="text" aria-required="true" readonly required="required" id="lat" name="latitude" class="form-control" placeholder="纬度"/>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" onclick="getCoord()" class="btn btn-primary waves-effect waves-light btn-md clickGis" data-id="geographicCoordinates">查看地图</button>
                                </div>
                            </div>

                        </form>
                        <div class="form-group" style="text-align: center;margin-bottom: 0px;">
                            <div class="col-sm-4 col-sm-offset-3" style="text-align: center">
                                <button class="btn btn-primary" id="add-btn" type="button">确认</button>
                                <button class="btn btn-danger" onclick="javascript:history.go(-1)" type="button">返回</button>
                            </div>
                        </div>

                        <div style="display: none">
                            <form id="imgform" enctype="multipart/form-data" action="${path}/file/uploadimage" method="post">
                                <input type="file" id="file" onchange="uploadimg()" name="file">
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@include file="/WEB-INF/common/hplus-suggest-js.jsp"%>
    <!--手机号 生分证，表单校验插件 -->
<script src="${pageContext.request.contextPath}/assets/js/validate/dist/additional-methods.js"></script>
    
    <script src="${path}/assets/hplus/js/demo/form-validate-demo.js"></script>
    <script>

            $("#add-btn").click(function() {
            	var valid = $("#userForm").valid();
                if(valid) {
            		$("#userForm").ajaxSubmit({
                        dataType: "json",
                        success: function (json) {
                            var code = json.code;
                            if(code == 0){
                            	layer.msg(json.msg, {icon: 1});
                                setTimeout(function(){
                                    window.location.href = document.referrer;
                                }, 2000);
                            }else{
                            	layer.msg(json.msg, {icon: 5,time:2000});
                            }
                        },
                        error:function(){
                        	layer.msg('处理发送错误! 请联系管理员', {icon: 5});
                        }
                    });
            	}else{
            		layer.msg("请填写完整信息！！！！", {
						icon : 5
					});
            	}
        });

            var index ;
            function getCoord(){
            index = layer.open({
                    type: 2,
                    title: '取点',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['80%', '80%'],
                    content: '${path}/place/map' //iframe的url
                });
            }

             function getcoordinates(lng,lat){
                $("#log").val(lng);
                $("#lat").val(lat);

             }

             function close() {
                 layer.close(index);
             }


             function upload() {
                $("#file").click();

             }


            function uploadimg (){
                var file = $("#file").val();
                if (file==''){
                    layer.msg("没有选择图片!",{icon:5});
                    return;
                }
                var extStart = file.lastIndexOf('.'),
                    ext = file.substring(extStart, file.length).toUpperCase();
                if (ext == '.PNG' || ext == '.JPG' || ext == '.JPEG' || ext == '.GIF') {
                    console.log("上传")
                    $("#img").val(file);
                    shangchaun();
                }else {
                    layer.msg("文件非图片格式!请选择 png | jpg | jpeg | gif 格式",{icon:5});
                    $("#file").val('');
                    $('#imgform').resetForm();
                    return ;
                }
            }

            function shangchaun() {
                console.log("开始上传");
                $("#imgform").ajaxSubmit({
                    url:'${path}/file/uploadimage',
                    dataType: "json",
                    method  : 'POST',
                    success: function (json) {
                        var code = json.code;
                        var id = json.id;
                        if(code == 0){
                            $("#photo").val(id);
                            alert(json.msg);
                            setTimeout(function(){

                            }, 2000);
                            $("#file").val('');
                        }else{
                            alert(json.msg);
                            $("#file").val('');
                        }
                        $('#imgform').resetForm();
                    },
                    error:function () {
                    }
                });
            }





    </script>

</body>
</html>
